<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">{{title}}</block>
		</cu-custom>
		<view class="info-box">
			<view class="total-num">
				<text>评分</text>
				<image src="@/static/star-on.png"></image>
				<text>{{comment_sum}}</text>
			</view>
			<view class="tab-box">
				<view class="tab" v-for="(item,index) in listObj" :key="index" :class="index==TabCur?'cur':''"
				 @tap="tabSelect" :data-id="index">
					{{item.title}}({{item.total}})
				</view>
			</view>
		</view>
		
		<view class="evaluate-box">
			<scroll-view scroll-y="true" :style="'height: '+scrollHeight+'px'" @scrolltolower="getMore">
				<block v-for="(item,index) in listObj" :key="index" v-if="index==TabCur" >
				<view class="evaluate-item" v-for="(order ,i) in item.list" :key="i">
					<view class="user-star">
						<image class="user-avatar" :src="order.member_head_portrait"></image>
						<view class="name-star">
							<text class="user-name">{{order.member_nickname}}</text>
							<view class="star">
								<block v-for="(pic,index) in order.score_pic" :key="index">
									<image :src="pic"></image>
								</block>
								
							</view>
						</view>
					</view>
					<view class="time">{{$common.timeFormat(order.created_at)}}</view>
					<view class="content">{{order.content}} </view>
					<view class="thumbs" v-if="order.covers != '' && order.covers != null">
						<block v-for="(item,index) in order.covers" :key="index">
						<image :src="item"></image>
						</block>
					</view>
					<view class="re-evaluate" v-if="order.again_addtime > 0">用户{{order.again_addtime}}天后追评</view>
					<view class="content" v-if="order.again_content != ''" >{{order.again_content}} </view>
					<view class="reply-box" v-if="order.explain_first != ''">
						<view class="note">商家回复</view>
						<view class="reply">{{order.explain_first}}
						<!-- <text>展开</text> -->
						</view>
					</view>
				</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		mounted() {
			this.getScrollH()
		},
		data() {
			return {
				scrollHeight: 100,
				theme: this.$config.THEME(),
				title: '商品评价',
				TabCur: 0,
				goods_id:0,
				comment_sum:0,
				listObj: [{
						title: '全部',
						list: [],
						hasMore: true,
						loading: false,
						page: 1,
						type: 1,
						total: 200,
					},
					{
						title: '好评',
						list: [],
						hasMore: true,
						loading: false,
						page: 1,
						type: 2,
						total: 100,
					}, {
						title: '中评',
						list: [],
						hasMore: true,
						loading: false,
						page: 1,
						type: 3,
						total: 40,
					},
					{
						title: '差评',
						list: [],
						hasMore: true,
						loading: false,
						page: 1,
						type: 4,
						total: 10,
					},
				],
			};
		},
		onLoad(options) {
			if (options.status)
				this.TabCur = parseInt(options.status)
				
			if (options.goods_id)
				this.goods_id = options.goods_id
		},
		onShow() {
			if (this.$common.loginAuth(true)) {
				this.$nextTick(function() {
					uni.startPullDownRefresh({})
				})
			}
		},
		methods: {
			getScrollH() {
				let sys = uni.getSystemInfoSync();
				let winHeight = sys.screenHeight;
				//console.log(winHeight)
				let _this = this
				// 计算scroll-view高度
				let query = uni.createSelectorQuery().in(_this);
				query.select('.info-box').boundingClientRect()
				query.selectViewport()
				query.exec(function(res) {
					//console.log(res)
					_this.scrollHeight = winHeight - res[0].bottom
				})
			},
			tabSelect(e) {
				if (this.TabCur != e.currentTarget.dataset.id) {
					this.TabCur = e.currentTarget.dataset.id
					this.listObj[this.TabCur].list = []
					this.listObj[this.TabCur].hasMore = true
					this.listObj[this.TabCur].page = 1
					this.listObj[this.TabCur].loading = false
					this.getList(this.TabCur)
				}
			},
			getList(index) {
				let obj = this.listObj[index]
				if (!obj.hasMore || obj.loading) return

				this.listObj[index].loading = true
				let params = {
					page: obj.page,
					type: obj.type,
					product_id:this.goods_id
				}
				this.$http
					.get('evaluate_goods_detail', params)
					.then((response) => {
						console.log(response)
						let list = obj.list
						if (response.data.data.length > 0) {
							list = list.concat(response.data.data)
							for(var i = 0; i <= 3; i++) {
								this.listObj[i].total = list[0].count['goods'+i];
							}
							this.comment_sum = list[0].count['sum']
						
						} else {
							this.listObj[index].hasMore = false
						}
						
						this.listObj[index].list = list
						this.listObj[index].loading = false
						this.listObj[index].page++
						uni.stopPullDownRefresh()
					})
					.catch((response) => {
						console.log(response)
					})
			},
			getMore(){
				this.getList(this.TabCur)
			}
		},
		onPullDownRefresh() {
			this.listObj[this.TabCur].list = []
			this.listObj[this.TabCur].hasMore = true
			this.listObj[this.TabCur].page = 1
			this.listObj[this.TabCur].loading = false
			this.getList(this.TabCur)
		},
	}
</script>

<style>
	.info-box{
		background-color: #FFFFFF;
		padding: 30rpx;
	}
	.info-box .total-num{
		display: flex;
		align-items: center;
	}
	.info-box .total-num text{
		font-size: 28rpx;
		font-weight: bold;
		color: #E93125;
	}
	.info-box .total-num image{
		width: 24rpx;
		height: 24rpx;
		margin: 0 10rpx;
	}
	
	.info-box .tab-box{
		margin-top: 30rpx;
		display: flex;
		align-items: center;
	}
	.tab-box .tab{
		padding: 15rpx;
		border-radius: 6rpx;
		margin-right: 18rpx;
		font-size: 26rpx;
		background: #F4F4F4;
		color: #333333;
	}
	.tab-box .tab.cur{
		background: #E93125;
		color: #FFFFFF;
	}
</style>

<style>
	.evaluate-box{
		/* margin-top: 30rpx; */
		background-color: #FFFFFF;
		/* padding: 0 30rpx; */
	}
	.evaluate-box .top-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.top-title .title{
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
	}
	.top-title .more{
		font-size: 26rpx;
		color: #999999;
	}

	.evaluate-item{
		padding: 30rpx;
		border-top: 1rpx solid #EAEAEA;
	}
	.evaluate-item .user-star{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.user-star .user-avatar{
		border: 1rpx solid #EAEAEA;
		border-radius: 50%;
		width: 60rpx;
		height: 60rpx;
		margin-right: 12rpx;
		flex-shrink: 0;
	}
	.user-star .name-star{
		flex: 1;
	}
	.user-star .name-star .user-name{
		flex: 1;
		font-size: 28rpx;
		color: #333333;
	}
	.user-star .name-star .star{
		width: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.user-star .star image{
		width: 17rpx;
		height: 17rpx;
	}
	
	.evaluate-item .time{
		margin-top: 26rpx;
		font-size: 24rpx;
		color: #888888;
	}
	
	.evaluate-item .content{
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #333333;
		line-height: 40rpx;
	}
	
	.evaluate-item .thumbs{
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		flex-wrap: wrap;
		margin-top: 10rpx;
	}
	.evaluate-item .thumbs image{
		width: 224rpx;
		height: 222rpx;
		border-radius: 8rpx;
		margin-top: 20rpx;
		margin-right: 5rpx;
	}
	.evaluate-item .thumbs image:nth-child(3n){
		margin-right: 0;
	}
	
	.evaluate-item .re-evaluate{
		margin-top: 30rpx;
		font-size: 26rpx;
		color: #F0271F;
		font-weight: bold;
	}
	.evaluate-item .reply-box{
		margin-top: 30rpx;
		padding: 24rpx;
		background-color: #F8F8F8;
		border-radius: 10rpx;
	}
	.evaluate-item .reply-box .note{
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}
	.evaluate-item .reply-box .reply{
		margin-top: 16rpx;
		font-size: 26rpx;
		color: #666666;
		line-height: 36rpx;
	}
	.evaluate-item .reply-box .reply text{
		color: #333333;
		font-weight: bold;
	}
</style>
